<template>
	<div class="v-select-long">
		<div class="select-content" :class="{ 'placeholder': !isSelect }" @click="showDropdown">
			{{ selectContent }}
		</div>
		<ul class="select-dropdown" v-if="isShowDropdown">
      <!--<li v-if="typeof item === Object" v-for="(item, index) in selection" @click="selectItem(index)">{{ item.name }}</li>-->
      <!--<li v-for="(item, index) in selection" @click="selectItem(index)">{{ item }}</li>-->
      <template v-for="(item, index) in selection" v-if="typeof item === 'object'">
        <li @click="selectItemObj(index)">{{ item.name }}</li>
      </template>
      <template v-for="(item, index) in selection" v-if="typeof item === 'string'">
        <li @click="selectItem(index)">{{ item }}</li>
      </template>
		</ul>
	</div>
</template>

<script>
export default {
  name: 'VSelectLong',
  props: {
    tip: {
      type: String
    },
    selection: {
      type: Array,
      required: true
    },
    init: {
      type: [String, Object]
    }
  },
  data () {
    return {
      isSelect: false,
      isShowDropdown: false,
      nowIndex: null
    }
  },
  watch: {
    init () {
      this.nowIndex = 0
      // 初始化时传值
      this.initialVal()
    },
    selection () {
      this.nowIndex = 0
      // 初始化时传值
      this.initialVal()
    }
  },
  computed: {
    selectContent () {
      if (this.isSelect) {
        if (typeof this.selection[0] === 'object') {
          return this.selection[this.nowIndex].name
        } else {
          return this.selection[this.nowIndex]
        }
      } else {
        return this.tip
      }
    }
  },
  methods: {
    showDropdown () {
      if (this.selection.length === 0) {
        return
      }
      this.isShowDropdown = !this.isShowDropdown
    },
    hideDropdown () {
      this.isShowDropdown = false
    },
    selectItemObj (index) {
      this.nowIndex = index
      this.isSelect = true
      this.hideDropdown()
      this.$emit('on-select', this.selection[this.nowIndex].name)
    },
    selectItem (index) {
      this.nowIndex = index
      this.isSelect = true
      this.hideDropdown()
      this.$emit('on-select', this.selection[this.nowIndex])
    },
    // 初始化时传值
    initialVal () {
      if (this.init) {
        this.nowIndex = 0
        this.selection.forEach((item, index) => {
          if (item.name === this.init) {
            this.selectItem(index)
            return
          }
        })
      }
    }
  },
  mounted () {
    this.initialVal()
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) {
        this.hideDropdown()
      }
    })
  }
}
</script>

<style scoped>
.v-select-long {
	height: 48px;
	position: relative;
}

.select-content {
	width: 100%;
	height: 48px;
	line-height: 48px;
	border: 1px solid #d7d7d7;
	border-radius: 2px;
	padding-left: 15px;
	font-size: 14px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
}

.select-content:after {
	content: '';
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #333;
	position: absolute;
	top: 21px;
	right: 15px;
}

.placeholder {
	color: #a5a5a5;
}

.select-dropdown {
	width: 100%;
	border: 1px solid #d7d7d7;
	background-color: #fff;
	box-sizing: border-box;
	position: absolute;
	top: 100%;
	left: 0;
  z-index: 1;
}

.select-dropdown li {
	height: 30px;
	line-height: 30px;
	padding-left: 15px;
	cursor: pointer;
}

.select-dropdown li:hover {
	color: #fff;
	background-color: #1e90ff;
}
</style>
